<template>
  <div class="todo-item" :class="{ completed: completed }">
    <input 
      type="checkbox" 
      :checked="completed" 
      @change="toggleCompletion"
    >
    <span>{{ title }}</span>
    <button @click="removeTodo">删除</button>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.completed);
    },
    removeTodo() {
      this.$emit('remove-todo');
    }
  }
}
</script>

<style scoped>
.todo-item {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
}

.todo-item.completed span {
  text-decoration: line-through;
  color: #999;
}

input[type="checkbox"] {
  margin-right: 10px;
}

button {
  margin-left: auto;
  background: #ff4444;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
}
</style>